
import React, { Component } from 'react';
import { Button, Alert, Carousel } from 'react-bootstrap'
import './home.css'


const userInfo = {
    name: 'aha',
    note: '这是一个备注'
}

let arr = [1, 2, 3, 4, 5, 6]


export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: {
                userName: '',
                userTel: ''
            }
        };


    }

    render() {
        return (
            <div className="home_box">
                <Alert variant="primary">这是一个提示</Alert>
                <div className="swiper_box">
                    <Carousel>
                        {
                            arr.map((item, index) => {
                                return (<Carousel.Item key={index}>
                                    <div className="swiper_body">{item}</div>
                                    <Carousel.Caption>
                                        <h1>
                                            {item} slide label
                                        </h1>
                                    </Carousel.Caption>
                                </Carousel.Item>)
                            })
                        }
                    </Carousel>
                </div>

                <div>{this._username(userInfo)}</div>
                <div>
                    <input className="user_name" type="text" name="userName" placeholder="请输入你的名字" />
                    <input className="user_tel" type="number" name="userTel" placeholder="请输入你的电话" />
                    <Button className="send_btn" size="lg" block variant="primary" onClick={() => { this._sendInfo() }}>提交</Button>
                    {/* <button className="send_btn" onClick={() => { this._sendInfo() }}>提交</button> */}
                </div>
                <div>我的名字是：{this.state.userName}</div>
                <div>我的电话是：{this.state.userTel}</div>
            </div>
        )
    }

    _username = (info) => {
        return info.name + info.note
    }

    _sendInfo() {
        let userName = document.getElementsByClassName('user_name')[0]
        let userTel = document.getElementsByClassName('user_tel')[0]
        this.setState(
            this.state.form = {
                userName: userName.value,
                userTel: userTel.value
            })
    }
}
